<style lang="scss" scoped>
.home{
    header{
        width: 100%;
        height: 0.44rem;
        background-color: rgba(53, 124, 185, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 0.18rem;
        text-align: center;
        span{
            line-height: 0.44rem; //与父标签高度相等实现垂直居中
        }
        .person{
            line-height: 0.44rem;
            float: right;
            margin-right: 0.1rem;
            .api{              
                p{
                    color:#ffffff;
                    font-size: 0.14rem;
                    text-align: center;
                    span{
                        margin-left: 0.1rem;
                    }
                    &:nth-child(-n+4),{
                        border-bottom: 0.01rem solid #ffffff;
                    }
                }
            }
            
        }
    }
    .nav{
        width:100%;
        .nav-item{
            margin: 0.24rem 0.15rem;
            background-color: rgba(235, 240, 242, 1);
            padding: 0.1rem 0.2rem;
            img{
                height: 0.4rem;
                width: 0.4rem;
                float: left;
            }
            .nav-item-description{
                float: left;
                margin-left: 0.2rem;
                .item-title{
                    line-height: 0.2rem;
                    color: rgba(1, 42, 54, 1);
                    font-size: 0.14rem;
                }
                .item-content{
                    line-height: 0.17rem;
                    color: rgba(96, 125, 139, 1);
                    font-size: 0.12rem;
                }
            }
            overflow: hidden;
        }
        .nav-item:after{
            content:"";
            clear: both;
        }
    }
    .sample{
        .sample-title{
            background-color: rgba(235, 240, 242, 1);
            width:100%;
            span{
                margin-left: 0.15rem;
                color: rgba(152, 165, 171, 1);
                font-size: 0.18rem;
                line-height: 0.5rem;
            }
        }
        .sample-list{
            .el-table{
                font-size: 0.16rem;
            }
        }
        & + .sample{
            margin-top:0.24rem;
        }
    }
}
</style>

<template>
    <div class="home">
        <header>
            <span>首页</span>  
            <div class="person">
                <Tooltip placement="bottom-end">
                    <Icon type="person-add" ></Icon> 
                    <div class="api" slot="content">
                        <p @click="goAccountInfo">
                            <Icon type="ios-person"></Icon> 
                            <span>帐号信息</span>                        
                        </p>
                        <p @click="exit" >
                            <Icon  type="arrow-swap"></Icon>
                            <span>退出</span>
                        </p>                        
                    </div>
                </Tooltip>
            </div>         
        </header>
        <div class="nav">
            <div class="nav-item" >
                <img src="/static/images/index/addSample.png" @click="chooseProject"/>
                <div class="nav-item-description" @click="chooseProject">
                    <p class="item-title">新建样本</p>
                    <p class="item-content">最近新建样本</p>
                </div>
            </div>
            <!-- <div class="nav-item" >
                <img src="/static/images/index/personInfo.png" @click="goAccountInfo"/>
                <div class="nav-item-description" @click="goAccountInfo">
                    <p class="item-title">帐号信息</p>
                    <p class="item-content">个人帐号信息查询</p>
                </div>
            </div> -->
            <div class="nav-item" v-show="accessStatus.manageAccess">
                <img src="/static/images/index/personInfo.png" @click="chooseManage"/>
                <div class="nav-item-description" @click="chooseManage">
                    <p class="item-title">经销商相关管理</p>
                    <p class="item-content">经销商医院存款管理</p>
                </div>
            </div>
            <div class="nav-item" v-show="accessStatus.roleAccess">
                <img src="/static/images/index/personInfo.png" @click="chooseRole"/>
                <div class="nav-item-description" @click="chooseRole">
                    <p class="item-title">权限管理</p>
                    <p class="item-content">用户角色权限控制</p>
                </div>
            </div>
        </div>

        <div class="sample">
            <div class="sample-title">
                <span>暂存样本</span>
            </div>
            <div class="sample-list">
                <el-table :data="tempList" @row-click="dblclick">
                    <el-table-column  label="姓名" prop="name"></el-table-column>
                    <el-table-column label="样本编号" prop="sampleNum"></el-table-column>
                    <el-table-column label="检测项目" prop="testType" ></el-table-column>
                    <el-table-column label="金额" prop="monney"></el-table-column>
                    <!-- <el-table-column label="状态" prop="sampleState"></el-table-column> -->
                </el-table>
            </div>
        </div>


        <div class="sample">
            <div class="sample-title">
                <span>我的样本</span>
                <span style="float:right;margin-right:13px;" @click="goMySample">查看></span>
            </div>
            <div class="sample-list">
                <el-table :data="limitList" >
                    <el-table-column  label="姓名" prop="name"></el-table-column>
                    <el-table-column label="样本编号" prop="sampleNum"></el-table-column>
                    <el-table-column label="检测项目" prop="testType" ></el-table-column>
                    <el-table-column label="金额" prop="monney"></el-table-column>
                </el-table>
            </div>
        </div>

        <Modal v-model="chooseModal" :closable="false" :scrollable='true'>
            <p slot="header">选择检测项目</p>
            <div class="modal-content">
                <p @click="goGeneticTumor">遗传性肿瘤</p>
                <p @click="goRareInfo">单基因遗传病</p>
                <p @click="goBodyCell">肿瘤个体化用药</p>
            </div>
            <div slot="footer"></div>
        </Modal>

        <Modal v-model="chooseManageModal" :closable="false" :scrollable='true'>
            <p slot="header">选择项目</p>
            <div class="modal-content">
                <p @click="goAgentInfo" v-show="accessStatus.agent">经销商管理</p>
                <p @click="goHospitalInfo" v-show="accessStatus.hospital">医院管理</p>
                <p @click="goSaveMoney" v-show="accessStatus.saveMoney">预付款存款</p>
            </div>
            <div slot="footer"></div>
        </Modal>

        <Modal v-model="chooseRoleModal" :closable="false" :scrollable='true'>
            <p slot="header" >选择项目</p>
            <div class="modal-content">
                <p @click="goRoleManage">角色添加</p>
                <p @click="goUserRole">用户角色设置</p>
                <p @click="goRoleMenu">角色权限设置</p>               
            </div>
            <div slot="footer"></div>
        </Modal>

    </div>
</template>

<script>
import {sampleData} from 'api/index.js';
import { error } from 'util';
export default {
    name:"index",
    data(){
        return{
            chooseModal:false,
            chooseManageModal:false,
            chooseRoleModal:false,
            limitList:[],
            tempList:[],
            accessStatus:{
                hospital:false,
                agent:false,
                saveMoney:false,
                roleAccess:false,
                manageAccess:false,
            }
        }
    },
    methods:{
        exit(){
            sampleData.logoutIndex().then(res=>{
                if(res.code==0||res.code==200){
                    this.$router.push('/login');
                }
                else{
                    this.$Message.error(res.msg);
                }
            }).catch(error=>{
                this.$Message.error(error);
            })
            
        },
        chooseProject(){
            this.chooseModal=true;
        },
        goAccountInfo(){
            this.$router.push('/accountInfo');
        },
        goGeneticTumor(){
            this.$store.state.currentCatalog='geneticTumor';
            this.$store.state.operation='add';
            this.$router.push('/geneticTumor');
        },
        goRareInfo(){
            this.$store.state.currentCatalog='rare';
            this.$store.state.operation='add';
            this.$router.push('/rareInfo');
        },
        goBodyCell(){
            this.$store.state.currentCatalog='bodyCell';
            this.$store.state.operation='add';
            this.$router.push('/bodyCell');
        },
        goMySample(){
            this.$router.push('/mySample');
        },
        getLimitList(){
            sampleData.getLimitList().then(res=>{
                if(res.code==0||res.code==200){
                    this.limitList=res.list;
                }
                else{
                    this.$Message.error(res.msg);
                }                
            }).catch(error=>{
                this.$Message.error(error);
            })
        },
        dblclick(row){
            this.$store.state.sampleid = row.id;
            switch (row.sampleType) {
                case 0:
                this.$store.state.currentCatalog = "geneticTumor";
                break;
                case 1:
                this.$store.state.currentCatalog = "rare";
                break;
                case 2:
                this.$store.state.currentCatalog = "bodyCell";
                break;
                default:
                break;
            }
            switch (this.$store.state.currentCatalog) {
                case "geneticTumor":
                this.$store.state.operation = "edit";
                this.$router.push("/geneticTumor");
                break;
                case "rare":
                this.$store.state.operation = "edit";
                this.$router.push("/rareInfo");
                break;
                case "bodyCell":
                this.$store.state.operation = "edit";
                this.$router.push("/bodyCell");
                break;
                default:
                break;
            }
            this.$store.state.btnTemp=true;            
        },
        goAgentInfo(){
            this.$router.push('/agentList')
        },
        goHospitalInfo(){
            this.$router.push('/hospitalList')
        },
        getTempList(){
            sampleData.getTempList().then(res=>{
                if(res.code==0||res.code==200){
                    this.tempList=res.list;
                }
                else{
                    this.$Message.error(res.msg);
                }                
            }).catch(error=>{
                this.$Message.error(error);
            })
        },
        goSaveMoney(){
            this.$router.push('/saveMoney')
        },
        getAccessControl(){
            sampleData.accessControl().then(res=>{
                if(res.code==0||res.code==200){
                     res.list.forEach(element => {
                         if(element){
                             this.accessStatus[element.url]=true;
                         }                        
                     });
                     if(this.accessStatus['hospital'] || this.accessStatus['agent'] || this.accessStatus['saveMoney']){
                         this.accessStatus['manageAccess']=true;
                     }
                }
                else{
                    this.$Message.error(res.msg);
                }                
            }).catch(error=>{
                this.$Message.error(error);
            })
        },
        chooseRole(){
            this.chooseRoleModal=true;
        },
        goRoleManage(){
            this.$router.push('/roleList')
        },
        goRoleMenu(){
            this.$router.push('/roleMenu')
        },
        goUserRole(){
            this.$router.push('/userRole')
        },
        chooseManage(){
            this.chooseManageModal=true;
        }
    },
    created() {
        this.getAccessControl()
    },
    mounted() {
        this.getLimitList();
        this.getTempList();
    },
}
</script>


